import React, { type CSSProperties } from "react";
import { Dropdown, type MenuProps } from "antd";
import { useNavigate } from "react-router";
import { useGlobalStore } from "@/store/global";
import { useTabsStore } from "@/store/tabs";
import { useShallow } from "zustand/react/shallow";
import { useKeepAliveInsRef } from "@/hooks/modules/useKeepAliveInsRef";
import { ReloadOutlined, ExpandOutlined, CloseCircleOutlined, ColumnWidthOutlined, SwitcherOutlined, VerticalLeftOutlined, VerticalRightOutlined, DownOutlined } from "@ant-design/icons";

interface MoreButtonProps {
  path: string;
}

const style: CSSProperties = { fontSize: "14px" };

const MoreButton: React.FC<MoreButtonProps> = ({ path }) => {
  const navigate = useNavigate();

  const { keepAliveInsRefCache } = useKeepAliveInsRef();

  const { setGlobalState } = useGlobalStore(useShallow((state) => ({ setGlobalState: state.setGlobalState })));
  const { removeTab, closeTabsOnSide, closeMultipleTab } = useTabsStore(useShallow((state) => ({ removeTab: state.removeTab, closeTabsOnSide: state.closeTabsOnSide, closeMultipleTab: state.closeMultipleTab })));

  const items: MenuProps["items"] = [
    {
      key: "1",
      label: <span>刷新</span>,
      icon: <ReloadOutlined style={style} />,
      onClick: () => keepAliveInsRefCache?.refresh()
    },
    {
      key: "2",
      label: <span>最大化</span>,
      icon: <ExpandOutlined style={style} />,
      onClick: () => setGlobalState({ key: "maximize", value: true })
    },
    {
      type: "divider"
    },
    {
      key: "3",
      label: <span>关闭当前</span>,
      icon: <CloseCircleOutlined style={style} />,
      onClick: () => removeTab({ path, isCurrent: true })
    },
    {
      key: "4",
      label: <span>关闭左侧</span>,
      icon: <VerticalRightOutlined style={style} />,
      onClick: () => closeTabsOnSide({ path, type: "left" })
    },
    {
      key: "5",
      label: <span>关闭右侧</span>,
      icon: <VerticalLeftOutlined style={style} />,
      onClick: () => closeTabsOnSide({ path, type: "right" })
    },
    {
      type: "divider"
    },
    {
      key: "6",
      label: <span>关闭其他</span>,
      icon: <ColumnWidthOutlined style={style} />,
      onClick: () => closeMultipleTab({ path })
    },
    {
      key: "7",
      label: <span>关闭所有</span>,
      icon: <SwitcherOutlined style={style} />,
      onClick: () => {
        closeMultipleTab({});
        navigate("/home");
      }
    }
  ];

  return (
    <div className="more-button">
      <Dropdown menu={{ items }} placement="bottomRight" arrow={true} trigger={["click"]}>
        <div className="more-button-item">
          <DownOutlined />
        </div>
      </Dropdown>
    </div>
  );
};

export default MoreButton;
